<template>
    <div class="Register">
        <Row>
            <Col span="8" offset="8">
                <h1 style="text-align: center;padding: 20px">注册</h1>
                <Form ref="formReg" :model="formReg" :rules="ruleReg" label-position="left" :label-width="100">
                    <FormItem prop="username" label="用户名">
                        <Input v-model="formReg.username" type="text" placeholder="Username" size="large">
                            <Icon type="ios-person-outline" slot="prefix"/>
                        </Input>
                    </FormItem>
                    <FormItem  label="密码" prop="password" label-position="right">
                        <Input v-model="formReg.password" type="password" password placeholder="Password" size="large">
                            <Icon type="ios-lock-outline" slot="prefix"/>
                        </Input>
                    </FormItem>
                    <FormItem label="确认密码"prop="passWord">
                        <Input v-model="formReg.password" type="password" password placeholder="Confirm Password"
                               size="large">
                            <Icon type="ios-lock-outline" slot="prefix"/>
                        </Input>
                    </FormItem>
                    <FormItem label="邮箱"prop="email">
                        <Input v-model="formReg.email" type="email" placeholder="E-mail" size="large">
                            <Icon type="ios-mail-outline" slot="prefix"/>
                        </Input>
                    </FormItem>
                    <FormItem label="手机号"prop="tel">
                        <Input v-model="formReg.tel" placeholder="Tel" type="tel" size="large">
                            <Icon type="ios-call-outline" slot="prefix"/>
                        </Input>
                    </FormItem>
                    <FormItem label="验证码"prop="PIN">
                        <Input v-model="formReg.PIN" placeholder="PIN" size="large">
                            <Icon type="ios-checkmark-circle-outline" slot="prefix"/>
                        </Input>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" @click="tryRegister(formReg)">注册</Button>
                    </FormItem>


                </Form>
            </Col>
        </Row>
    </div>
</template>
<script>
    import {mapActions} from "vuex";

    export default {
        data() {
            return {
                posted:{
                    register:false
                },
                formReg: {
                    username: '',
                    password: '',
                    email: '',
                    tel: '',
                    PIN: ''
                },
                ruleReg:{
                    username: [
                        {required: true, message: '账号不能为空', trigger: 'blur'},
                        {min: 3, max: 16, message: '账号长度3-16个字符', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '密码不能为空', trigger: 'blur'},
                        {type: 'string', min: 6, max: 16, message: '密码长度6-16个字符', trigger: 'blur'}
                    ],
                    email: [
                        {required:true}
                    ],
                    tel:[
                        {required:true}
                    ],
                    PIN: [
                        {required:true}
                    ]
                }
            }
        },
        methods:{
            ...mapActions('user',['register']),
            tryRegister(formReg) {
                this.$refs["formReg"].validate(valid => {
                    let  {username,password,email,tel} = formReg
                    this.register({
                        username,password,email ,tel,
                        callback: user => {},
                        info: (type,msg) => this.$Message[type](msg),
                        valid,
                        posted:this.posted
                    })
                });
            }
        }
    }

</script>